<template>
  <div class='content'>
    <div class='show-item bg-black'>
      <funnel-style-1 sid='funnel1' :source='areaSource' />
      <Spin size='large' fix v-if='spinShow1' />
    </div>
    <div class='show-item bg-black jz'>
      <funnel-style-2 />
    </div>
  </div>
</template>
<script>
import FunnelStyle1 from '../../cell/funnel/funnel-style-1'
import FunnelStyle2 from '../../cell/funnel/funnel-style-2'
export default {
  components: {
    'funnel-style-1': FunnelStyle1,
    'funnel-style-2': FunnelStyle2,
  },
  data() {
    return {
      areaSource: [],
      spinShow1: true,
    }
  },
  mounted() {
    this.fetchArea()
  },
  methods: {
    fetchArea() {
      this.$http.get('/funnel/areaSource')
        .then(res => {
          this.areaSource = res.data
          this.spinShow1 = false
        })
        .catch(err => {
          console.log(err);
          this.$fetchMock('/static/mock/funnel/areaSource.json')
            .then(res => {
              this.areaSource = res
              this.spinShow1 = false
            })
        })
    },
  },
}
</script>
<style lang="scss" scoped>
  @import './funnel.scss';
  .jz{
width: 720px;
height: 500px;
  }
</style>

